<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JetWave Service</title>
    <style>
      /* 隐藏Zendesk默认的启动按钮 */
      iframe[title*="Button to launch messaging window"] {
        display: none !important;
      }
      
      /* 确保Zendesk聊天窗口的层级 */
      iframe[title*="Messaging window"] {
        z-index: 10000 !important;
      }
      
      /* 添加遮罩层效果 */
      #zendesk-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
        animation: fadeIn 0.3s ease;
      }
      
      body.zendesk-visible #zendesk-overlay {
        display: block;
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <!-- Zendesk遮罩层 -->
    <div id="zendesk-overlay"></div>
    
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    
    <!-- Start of jetwave-74810 Zendesk Widget script -->
    <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=e16c2947-8b02-4a5b-bfc1-eb82a7706271"></script>
    <!-- End of jetwave-74810 Zendesk Widget script -->
    
    <!-- Zendesk 配置和事件监听 -->
    <script>
      // 点击遮罩层关闭Zendesk
      document.addEventListener('DOMContentLoaded', function() {
        const overlay = document.getElementById('zendesk-overlay');
        if (overlay) {
          overlay.addEventListener('click', function() {
            // 关闭Zendesk
            if (window.zE) {
              try {
                window.zE('messenger', 'close');
              } catch (e) {
                console.warn('Failed to close Zendesk:', e);
              }
            }
            // 移除可见类
            document.body.classList.remove('zendesk-visible');
          });
        }
      });
    </script>
  </body>
</html>
